<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgColor="bgColor" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">完工</block>
				<view slot="right" @tap="saveData">提交</view>
			</cu-custom>
			<view class="header">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
					<view class='cuIcon-search'></view>
					<input v-model="searchText" confirm-type="search" @confirm="onInput" focus="true" class="input" type="text" autofocus="autofocus"
					 placeholder="扫描或输入条码" />
					<!-- <input v-model="searchText" @input="onInput" focus="true" class="input" type="text" placeholder="扫描或输入条码" /> -->
					<view class='cuIcon-scan' @tap="scanCode"  style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
				</view>
			</view>

			<view class="cu-form-group" style="margin-bottom: 10upx;"  @click="goPerationList()">
				<view class="title">
					<text>工序:</text>
					<text style="margin-left: 450rpx;" v-if="order.id==null">请选择</text>
          <uni-icons type="right" size="16" v-if="order.id==null"></uni-icons>
<!--					<image src="../../static/icon/choose.png" style="width: 32rpx;height: 20rpx;" alt="" v-if="order.id==null" />-->
        </view>
				<view class="uni-list-cell-db">
					<!-- <picker @change="bindGongxuChange" :value="indexGongxu" :range="gongxuPickerList">
						<view class="picker">{{gongxuPickerList[indexGongxu]}}</view>
					</picker> -->
					<view v-if="order.id" :value="indexGongxu" class="picker">
						{{order.operationName}}
					</view>
				</view>
			</view>

			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-card dynamic" v-for="(item,index) in productList" :key="index">
					<view class="cu-item shadow" :style="{'background-color':color===1?'#3bade3':'#f37b1d'}">
						<view class="text-content">
							条码： {{item.barcode}}
						</view>
						<view class="text-content">
							生产指令单： {{item.aufnr==null?'':item.aufnr}}
						</view>
						<view class="text-content">
							物料编码： {{item.matnr==null?'':item.matnr}}
						</view>
						<view class="text-content">
							物料名称： {{item.maktx==null?'':item.maktx}}
						</view>
						<view class="text-content">
							颜色尺码：{{item.colorName==null?'':item.colorName}} {{item.size==null?'':item.size}}
						</view>
						<view class="text-content">
							<view class="num">合格数：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.gmnga" name="gmnga" />
						</view>
						<view class="text-content">
							<view class="num">不合格数：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.xmnga" name="xmnga" />
						</view>
						<!-- <view class="text-content">
							<view class="num">工时：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.ism01" name="ism01" />
						</view> -->
						<!-- <view class="text-content"  v-show="false">
							<view class="num">工号：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.employees" name="employee" />
						</view>
						<view class="text-content">
							<view class="num">生产人员：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.employeeNames" name="employeeName" @click="choose(item,index)" />
						</view> -->
					</view>
				</view>
			</form>
		</scroll-view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/api/api.js'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				productList: [],
				barcodeMap: new Map(),
				chooseList: [],
				array: [],
				index: 0,
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				date: new Date().toISOString().slice(0, 10),
				searchText: "",
				filterText: '',
				code: '',
				imageList: [],
				gongxuPickerList: ['请选择'],
				gongxuList: [],
				indexGongxu: 0,
				senddata: {
					sampleAndResult: {
						vornr: "",
					}
				},
				afs: false,
				color: 0,
				bgColor: 'bg-green',
				showFinish:'false',
				order:{}
			};
		},

		// 导航搜索栏监听搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			// 搜索框内容 : e.text
			// console.log(e.text);
		},
		onLoad() {
			let url = '/dcloud/sysPara/sysPara/list'
			let that = this
			this.$http.get(url, {
				params: {
					para: "confirmationShowFinish",
				}
			}).then(res => {
				if (res.data.success) {
					this.showFinish = res.data.result.records[0].value
				}
			}).catch(err => {
				console.log(err);
			});
		},
		onShow() {
			let submitBack = uni.getStorageSync("submitBack")
			if (submitBack) {
				this.productList = []
				uni.removeStorageSync('submitBack')
				this.searchText = ''
			}
			if (uni.getStorageSync("industry") == 'afs') {
				this.afs = true
			}
			this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			let pages = getCurrentPages();
			if (pages[pages.length - 1].$vm.order.id) {
			    // this.schoolName = pages[pages.length - 1].$vm.schoolName
				this.order = pages[pages.length - 1].$vm.order
				this.indexGongxu = this.order;
			}
			// this.load();
			// this.getGongxuList();
			// this.searchText.focus;
		},
		onUnload() {
			this.max = 0,
				// this.data = [],
				this.productList = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				//	this.pageNo = this.pageNo + 1;
				// this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			onInput(e) {
				let barcode = e.detail.value
				if (barcode.length < 6 || barcode == '') {
					console.log(barcode.length)
					return;
				}
				// this.searchText=""
				if (this.indexGongxu == 0) {
					this.searchText = ""
					this.$tip.toast('请先选择工序')
					return;
				}

				if (this.barcodeMap.get(barcode)) {
					this.searchText = ""
					this.$tip.toast('条码已扫描')
					return;
				}
				let that = this;
				let url = '/dcloud/dcDispatchOrder/dcDispatchOrder/listDispatchOrderForConfirmation'
				let i = this.indexGongxu - 1;
				let vornr = this.order.operationCode
				this.$http.get(url, {
					params: {
						barCode: barcode,
						vornr: vornr,
						showFinish:that.showFinish,
						type:1,
						confType: 0
					},
				}).then(res => {
					// that.searchText=""
					if (res.data.success && res.data.result.length > 0) {
						let employee = res.data.result.employee
						let employeeName = res.data.result.employeeName
						if (employee == '' || employee == null){
							employee = uni.getStorageSync("login_user_info").workNo;
							employeeName = uni.getStorageSync("login_user_info").realname;
						}

						let item = {
							barcode: barcode,
							aufnr: res.data.result[0].aufnr,
							dispatchNo: res.data.result[0].dispatchNo,
							vornr: res.data.result[0].vornr,
							matnr: res.data.result[0].matnr,
							maktx: res.data.result[0].maktx,
							color: res.data.result[0].color,
							colorName: res.data.result[0].colorName,
							size: res.data.result[0].size,
							sizeName: res.data.result[0].sizeName,
							gmnga: res.data.result[0].menge,
							// ism01: res.data.result.records[0].ism01,
							xmnga: '',
							employee: employee,
							employeeName: employeeName,
							// employeeNames: res.data.result.records[0].employeeNames,
							// employees:res.data.result.records[0].employees,


						}
						// that.productList.push(item)
						that.productList.splice(0, 0, item);
						that.barcodeMap.set(barcode, barcode);
						if (this.color == 0) {
							this.color = 1
							this.bgColor = 'bg-green'
						} else {
							this.color = 0
							this.bgColor = 'bg-orange'
						}
						// this.searchText=""
					} else {
						this.$tip.toast('条码不存在或已完工')
					}
				}).catch(err => {
					console.log(err);
				});
			},
			goPerationList(){
				uni.navigateTo({
					url:'/packageA/mcloud/dcOperationList'
				})
			},
			choose(baogong,index){
				let bgVO={baogong:baogong,index:index}
				uni.navigateTo({
					url: '/packageA/mcloud/employee?bgVO='+JSON.stringify(bgVO)
				})

			},
			initData() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 300);
			},
			employeeOk(item){
				if(item){
					item.baogong.employee=item.employee
					item.baogong.employeeName=item.employeeName
					this.productList[item.index]=item.baogong
					// this.productList[item.index].employeeNames = item.employeeName
					// this.productList[item.index].employees = item.employee
				}
			},
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			bindGongxuChange: function(e) {
				this.indexGongxu = e.target.value
				let i = this.indexGongxu - 1;
				if (i >= 0) {
					uni.setStorageSync('operationCode', this.gongxuList[i].operationCode);
				}
			},

			saveData() {
				if (this.indexGongxu == 0) {
					this.$tip.alert('请选择工序');
					return;
				}
				if (this.productList.length == 0) {
					this.$tip.alert('没有扫描数据');
					return;
				}
				if (this.afs) {
					uni.navigateTo({
						url: '/pages/mcloud/scanSubmit?data=' + JSON.stringify(this.productList),
					});
				} else {
					let url = '/confirmation/confirmation/addBatch'
					this.$http.post(url, this.productList, {
						emulateJSON: true
					}).then(res => {
						if (res.data.success) {
							if (res.statusCode == "200") {
								uni.showToast({
									// icon: 'none',
									title: '保存成功'
								});
								this.searchText = ""
								this.productList = []
								this.barcodeMap = new Map()
							}
						}else{
							this.$tip.toast(res.data.message);
						}
					}).catch(err => {
						console.log(err);
					});
				}

			}

		}
	}
</script>
<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}


	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.cu-card>.cu-item {
		margin-bottom: 5px;
		margin-top: 10px;
	}

	.cu-card.dynamic>.cu-item>.text-content {
		margin-bottom: 1px;
		margin-top: 6px;
	}

	.date {
		height: 260rpx;
		text-align: center;
		background-color: #0081ff;
		color: #FFFFFF;
		word-break: break-all;
		margin-top: -1px;
	}

	.text {
		margin-top: 10rpx;
		word-break: break-all;
		color: #FFFFFF;
	}

	.baogong {
		margin-top: 6px;
		margin-botton: 6px;
		text-align: center;
		display: block;
		margin: 0 auto;
	}

	.mini-btn {
		text-align: center;
		border-radius: 15rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #0081ff;
		color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.num {
		float: left;
		width: 90px;
	}

	.numinput {
		border-bottom: 1px solid gray;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<style lang="scss">
	.uni-input {
		margin-bottom: -10upx;
	}
	.picker {
		text-align: right;
	}

</style>
